<template>
  <div>
    <top-bar backShow="true" titleShow="true" title="通知"></top-bar>
    <ul class="content gfc-grey1" v-for="item in msgList">
      <li class="con-bg flex">
        <img src="http://via.placeholder.com/135x135" alt="">
        <div class="info flex-1">
          <div><span class="name gfc-white">大师</span>赞这条发布<span class="icon"></span></div>
          <div class="gfc-white">老师您真厉害！</div>
          <div class="time">5天前</div>
        </div>
      </li>
      <li class="con-bg flex">
        <img src="http://via.placeholder.com/135x135" alt="">
        <div class="info flex-1">
          <div class="trade-tips gfc-white">您的汉莎国际外汇交易账户由于验证原因而受到限制。</div>
          <div class="time">5天前</div>
        </div>
      </li>
      <li class="con-bg flex">
        <img src="http://via.placeholder.com/135x135" alt="">
        <div class="info flex-1">
          <div><span class="name gfc-white">您</span><span class="gfc-grey2">已成功创建一笔交易!</span></div>
          <div class="type">
            <div class="small align-c">XAU/USD</div>
            <div class="big gfc-white">XAU/USD</div>
          </div>
          <div class="time">5天前</div>
        </div>
      </li>
      <li class="con-bg flex">
        <img src="http://via.placeholder.com/135x135" alt="">
        <div class="info flex-1">
          <div><span class="name gfc-white">您</span><span class="gfc-grey2">赚到了一笔交易!真棒！</span></div>
          <div class="type">
            <div class="small align-c">XAU/USD</div>
            <div class="big gfc-white">XAU/USD</div>
          </div>
          <div class="time">5天前<span class="gfc-orange2 pull-right">$1000000</span></div>
        </div>
      </li>
      <li class="con-bg flex">
        <img src="http://via.placeholder.com/135x135" alt="">
        <div class="info flex-1">
          <div><span class="name gfc-white">大师</span>开始<span class="gfc-white">关注</span>您的交易。</div>
          <div class="type">
            <div class="small align-c">XAU/USD</div>
            <div class="big gfc-white">XAU/USD</div>
          </div>
          <div class="time">5天前</div>
        </div>
      </li>
      <li class="con-bg flex">
        <img src="http://via.placeholder.com/135x135" alt="">
        <div class="info flex-1">
          <div><span class="name gfc-white">大师</span>开始<span class="gfc-white">跟随</span>您的交易。</div>
          <div class="type">
            <div class="small align-c">XAU/USD</div>
            <div class="big gfc-white">XAU/USD</div>
          </div>
          <div class="time">5天前</div>
        </div>
      </li>
      <li class="con-bg flex">
        <img src="http://via.placeholder.com/135x135" alt="">
        <div class="info flex-1">
          <div class="tips">入金通知</div>
          <div class="gfc-white">亲~&nbsp;&nbsp;&nbsp;&nbsp;您入金的<span class="gfc-orange2">$1000</span>已到账！</div>
          <div class="time">5天前</div>
        </div>
      </li>
      <li class="con-bg flex">
        <img src="http://via.placeholder.com/135x135" alt="">
        <div class="info flex-1">
          <div class="tips">出金通知</div>
          <div class="gfc-white">亲~&nbsp;&nbsp;&nbsp;&nbsp;您出金的<span class="gfc-orange2">$1000</span>已成功转出！</div>
          <div class="time">5天前</div>
        </div>
      </li>
      <li class="con-bg flex">
        <img src="http://via.placeholder.com/135x135" alt="">
        <div class="info flex-1">
          <div class="money-tips gfc-grey2">亲~<br>您的保证金比例已低于<span class="gfc-green">200%</span>，当保证金比例低于<span
            class="gfc-green">70%</span>时，系统将为您<span class="gfc-white">强制平仓</span>！
          </div>
          <div class="time">5天前</div>
        </div>
      </li>
      <li class="con-bg flex">
        <img src="http://via.placeholder.com/135x135" alt="">
        <div class="info flex-1">
          <div><span class="name gfc-white">大师</span>评论了这条发布</div>
          <div class="gfc-white">老师您真厉害！</div>
          <div class="time">5天前</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import topBar from '../../components/topBar/topBar.vue'
  export default {
    data() {
      return {
        pageNo: 1,   //分页数
        msgList: []  //消息列表
      }
    },
    components: {
      topBar
    },
    mounted(){
      var _this = this;
      this.asyncHttp('get', '/api/messages', {page: _this.pageNo}, function (res) {
        _this.msgList = res.messages;
      })
    }
  }
</script>

<style scoped>
  .content li {
    font-size: .16rem;
    padding: .2rem .18rem;
    border-bottom: 1px solid #333a42;
  }

  .content li:nth-child(2n) {
    background: #2d343d;
  }

  .content li:last-child {
    border: none;
  }

  .content li img {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    margin-right: .18rem;
  }

  .info > div {
    margin-bottom: .18rem;
    position: relative;
  }

  .info .time {
    margin: 0;
  }

  .info .name {
    padding-right: .09rem;
  }

  .info .trade-tips {
    line-height: .2rem;
    margin-bottom: .16rem;
  }

  .info .money-tips {
    line-height: .24rem;
    margin-bottom: .14rem;
  }

  .info .icon {
    position: absolute;
    top: .01rem;
    right: 0;
    width: .15rem;
    height: .15rem;
    background: url("../../assets/praise3.png") no-repeat 0/100% 100%;
  }

  .info .type > div {
    display: inline-block;
    height: .2rem;
    line-height: .2rem;
    vertical-align: middle;
  }

  .info .type .small {
    width: .4rem;
    color: #000;
    font-size: .07rem;
    background: #fff;
    margin-right: .08rem;
  }
</style>
